<template>
  <div id="app">
    <el-dialog
      v-model="visible"
      title="转移"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      style="width: 500px"
      :modal="true"
    >
      <el-form :model="form" label-position="top">
        <el-form-item lable="变更负责人为">
          <OwnerChange v-model="selectedUser" :width="'466px'" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="onSubmit">保存</el-button>
        <el-button @click="visible = false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import OwnerChange from './OwnerChange.vue'

const selectedUser = ref()
const visible = ref(false)

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
  onCancel: {
    type: Function,
    required: true,
  },
  onSubmit: {
    type: Function,
    required: false,
  },
})

watch(
  () => props.modelValue,
  (newValue) => {
    visible.value = newValue
  },
)
watch(visible, (newValue) => {
  if (!newValue) {
    props.onCancel()
  }
})

defineExpose({ selectedUser })
</script>
<style scoped></style>
